<template>
	<div class="wrapper">
		<!-- <el-input style="width: 260px;margin-left: 12px;" placeholder="请输入订单编号" v-model="searchValue">
			<template #append><el-button :icon="Search" @click="searchOrder()" /></template>
		</el-input>				   -->
		<el-table :data="tableData.records" style="width: 100%">
			<template #empty>
				 <el-empty description="您还没有订单哦" >
				 <el-button type="primary" size="large" @click="goShopping()">前去购物</el-button>
				 </el-empty>
			</template>
			<el-table-column>
				<template #default="scope">
					<div class="head-order">
						<div style="width: 160px;">订单状态：
							<el-tag type="warning" v-if="scope.row.orderStatus=='已完成'">已完成</el-tag>
							<el-tag type="danger" v-if="scope.row.orderStatus=='未付款'">未付款</el-tag>
							<el-tag type="success" v-if="scope.row.orderStatus=='待收货'">待收货</el-tag>
							<el-tag type="primary" v-if="scope.row.orderStatus=='已付款'">已付款</el-tag>
							<el-tag type="info" v-if="scope.row.orderStatus=='取消订单'">取消订单</el-tag>
						</div>
						<el-button type="success" size="small" plain style="margin-left: 402px;" v-show="scope.row.orderStatus=='待收货'" @click="updateStatus(scope.row.id, '已完成')">确认收货</el-button>						
						<el-button type="danger" size="small" plain style="margin-left: 398px;" v-show="scope.row.orderStatus=='未付款'" @click="goToPay(scope.row.id)">去付款</el-button>
						<el-button size="small" plain style="margin-right: 4px;" v-show="scope.row.orderStatus=='未付款'" @click="del(scope.row.id)">取消订单</el-button>
						<el-button type="primary" size="small" plain style="margin-left: 8px;"
						v-show="scope.row.orderStatus=='已完成' && !scope.row.reviewed"
						@click="goToReview(scope.row)">
						去评论
						</el-button>
			 		</div>
					<el-table :data="scope.row.goodsList" size="mini">
						<el-table-column label="商品图片" width="100">
							<template #default="scope">
								<img 
								:src="getPath(scope.row.imagePathList[0])" 
								@click="goGoodsInfo(scope.row.id)"
								style="width: 66px; height:76px;border: 1px solid #cccccc;cursor:pointer;" />
							</template>
						</el-table-column>
						<el-table-column prop="name" label="商品名" width="620" />
						<el-table-column prop="price" label="价格" width="200">
							<template #default="scope">
								￥{{ scope.row.price}}
							</template>
						</el-table-column>
						<el-table-column prop="count" label="数量" width="190" />
						<el-table-column prop="totalAmount" label="总价">
							<template #default="scope">
								<span style="color: indianred;">￥{{scope.row.totalAmount}}</span>
							</template>
						</el-table-column>
					</el-table>
				<div style="margin-left: 85%;font-size: 18px;color: indianred;">总金额：￥{{ scope.row.totalAmount}}</div>	
				</template>
    		</el-table-column>
  		</el-table>
		
		<el-pagination  
        background
        :page-count="tableData.pages"
        v-model:current-page="params.page"
        :total="tableData.total"
        :close-on-click-modal="false"
        @current-change="getOrderData"></el-pagination>
	</div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {get,post} from '@/plugins/axios'
import { getPath, getCookieForObject } from '@/util'
import { Search } from '@element-plus/icons-vue'
import { copy } from 'copy-anything'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter} from 'vue-router'

const router = useRouter()
const goShopping = ()=>{
	router.push({
		path: '/goods',
		query: { categoryId: -1 }
	})
}
const goGoodsInfo= (id)=>{
	router.push({
			path:'/goodsInfo',
			query:{goodsId:id}
	})
}
const goToPay = (id)=>{
	router.push({
		path: '/paid-method',
		query: { id: id }
	})
}

const props = defineProps(['status'])
const searchValue = ref('')
const params = reactive({
    page: 1,
    limit: 4
})
let tableData = reactive({
    records: [],
    pages: 1,
    total: 0
})

//const userId = getCookieForObject('user').id
const userId = 1

getOrderData()

// 只改接口逻辑：获取订单数据
function getOrderData(){
	get('/user/order/getList',{ userId, pageNo: params.page, pageSize: params.limit }, content=>{
		if (content.stateCode === 200) {
			tableData.records = content.data.map((item,index)=>({
				id: index + 1,
				orderId: 'ORD-' + (index + 1),
				createTime: item.time,
				orderStatus: item.orderState,
				goodsList: [
					{
						id: index + 100,
						name: item.name,
						price: item.totalMoney,
						count: 1,
						totalAmount: item.totalMoney,
						imagePathList: [item.photoUrl]
					}
				],
				totalAmount: item.totalMoney,
				reviewed: false
			}))
			tableData.total = tableData.records.length
			tableData.pages = 1
		}
	})
}

// 新增方法：跳转到评论页面
function goToReview(row) {
  const goodsId = row.goodsList[0].id
  router.push({
    path: '/goodsInfo',
    query: {
      goodsId,
      orderId: row.id, 
      fromOrder: true
    }
  })
}

function searchOrder() {
	if (searchValue.value != '') {
        get('/orders/searchByOrderId', { userId, pageNo: params.page, pageSize: params.limit, searchVal: searchValue.value }, content => {
			tableData.records = content.records
            tableData.pages = content.pages
            tableData.total = content.total
	    })
    } else {
        getOrderData()
    }
}

function updateStatus(id, status) {
	post('orders/updateStatus', { id, orderStatus: status }, content => {
		ElMessage({
			type: 'success',
			message: '已成功收货'
		})
		getOrderData()
	})
}
function del(id) {
	ElMessageBox.confirm('您确定要取消该订单吗', '警告',
		{
		  cancelButtonText: '再想想',
		  confirmButtonText: '确定',
		  type: 'warning'
		}
	).then(() => {
		post('/orders/del', { id }, content => {
			getOrderData()
		})
	})
}
</script>

<style lang="scss"  scoped>
	.wrapper {
		border-radius: 8px;
		box-sizing: border-box;
		height:100%;
	}
	.head-order{
		background-color: #fcead5;
		margin: 15px 0 15px 0;
		height: 40px;
		border-radius: 4px;
		display: flex;
		align-items: center;
	}
	.el-pagination {
	  left: 820px;
	  margin-top: 10px;
	}
</style>
